<template>
  <div class="header" ref="headerTop">
    <router-link tag="div" to="/" class="header-arrow" v-show="showHeaderArrow">
      <div class="iconfont">&#xe60a;</div>
    </router-link>
    <div class="header-full" v-show="!showHeaderArrow" :style="styleOpacity">
      <router-link tag="div" to="/" class="header-full__back">
        <div class="iconfont">&#xe60a;</div>
      </router-link>
      <div class="header-full__title">{{this.detailTitle}}</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'Banner',
  data () {
    return {
      showHeaderArrow: true,
      styleOpacity: {
        opacity: 0
      }
    }
  },
  props: {
    detailTitle: String
  },
  methods: {
    headerTopScroll () {
      const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      const showBeginTop = 60 // 从距离顶部什么高度开始滚动
      const hideBeginTop = 140 // 到距离顶部什么高度透明度变化结束
      if (scrollTop > showBeginTop) {
        let opacity = scrollTop / hideBeginTop
        if (opacity > 1) {
          opacity = 1
        } else {
          opacity = scrollTop / hideBeginTop
        }
        this.styleOpacity.opacity = opacity
        this.showHeaderArrow = false
      } else {
        this.showHeaderArrow = true
      }
    }
  },
  mounted () {
    this.headerTopScroll()
  },
  activated () {
    window.addEventListener('scroll', this.headerTopScroll)
  },
  deactivated () {
    window.removeEventListener('scroll', this.headerTopScroll)
  }
}
</script>

<style lang="scss" scoped>
  @import "~styles/scss/variable.scss";
  @import "~styles/scss/mixins.scss";
  .header {
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    height: $header-default-height;
    .header-full {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      background: $color-primary;
      height: $header-default-height;
      color: #fff;
      &__back {
        position: absolute;
        height: $header-default-height;
        line-height: $header-default-height;
        padding: 0 .3rem 0 .1rem;
      }
      &__title {
        text-align: center;
        height: $header-default-height;
        line-height: $header-default-height;
        @include ellipsis();
      }
    }
    .header-arrow {
      position: absolute;
      z-index: 1;
      top: .1rem;
      left: .1rem;
      background: rgba(0, 0, 0, .6);
      width: .8rem;
      height: .8rem;
      line-height: .8rem;
      text-align: center;
      border-radius: .4rem;
      color: #fff;
      font-size: $fontSize-regular;
    }
  }
</style>
